<template>
	<div>
		<h1>后台管理系统登陆页面</h1>
		<el-form :model="formData">
			<el-form-item label="账号">
				<el-input v-model="formData.phone"></el-input>
			</el-form-item>
			<el-form-item label="密码">
				<el-input v-model="formData.password"></el-input>
			</el-form-item>
			<el-button type="primary" @click="onLoginClick">登陆</el-button>

			<a
				:href="
					`${authorize_uri}?client_id=${client_id}&redirect_uri=${redirect_uri}`
				"
				>第三方登录</a
			>

			<el-button @click="onCsrfclick">csrf安全策略测试接口</el-button>
		</el-form>
	</div>
</template>
<script>
export default {
	data() {
		return {
			formData: {
				phone: '123456',
				password: '123'
			},
			client_id: '7c3f4f6dcdd01bd2f9c0',
			authorize_uri: 'https://github.com/login/oauth/authorize',
			redirect_uri: 'http://localhost:7001/api/oauth/redirect'
		}
	},
	mounted() {
		this.handleGitHub()
	},
	methods: {
		onCsrfclick() {
			this.$http.post('/api/csrf-test', { msg: '测试数据' })
		},
		onOauthClick() {
			// 	const authorize_uri = 'https://github.com/login/oauth/authorize'
			// const redirect_uri = 'http://localhost:3000/oauth/redirect'
			// const link = document.getElementById('login')
			// link.href = `${authorize_uri}?client_id=${client_id}&redirect_uri=${redirect_uri}`
			// this.$http.get('/api/oauth/redirect')
		},
		handleGitHub() {},
		async onLoginClick() {
			const data = await this.$http.post('/api/login', this.formData)
			console.log(data, '登录信息')
			window.localStorage.setItem('token', data.token)
			this.$message({ message: '登陆成功，即将跳转', type: 'success' })
			setTimeout(() => {
				this.$router.push('/blogs')
			}, 3000)
		}
	}
}
</script>
